const gulp = require('gulp')
const babel = require('gulp-babel');
const browserify = require('gulp-browserify');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

const less = require('gulp-less');
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });

const concat = require('gulp-concat');
const cssmin = require('gulp-cssmin');
const htmlmin = require('gulp-htmlmin');

const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');


gulp.task('任务名称', async () => {
  console.log('在此执行任务')
})

gulp.task('babel', () => {
  return gulp.src('./src/js/*.js') // 指定处理所有JS文件
    .pipe(babel({ // 对JS使用Babel进ES6转ES5
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest('build/js')) // 输出到指定目录
    .pipe(livereload())
})

gulp.task('browserify', () => {
  return gulp.src('./build/js/*.js')
    .pipe(browserify())					// 将CommonJs语法转换为浏览器能识别的语法
    .pipe(rename('bundle.js'))			// 为了防止冲突将文件重命名
    .pipe(gulp.dest('build/js'))		// 输出到指定位置
    .pipe(livereload())
});

gulp.task('uglify', function () {
  return gulp.src('build/js/bundle.js')
    .pipe(uglify())  //压缩js
    .pipe(rename('bundle.min.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(livereload());
});

gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({
      plugins: [autoprefix] // 自动扩展前缀
    }))
    .pipe(gulp.dest('./build/css'))
    .pipe(livereload());
});

gulp.task('concat', function () {
  return gulp.src('./build/css/*.css')
      .pipe(concat('bundle.css'))
      .pipe(gulp.dest('./build/css/concat'))
      .pipe(livereload());
});

gulp.task('cssmin', function () {
  return gulp.src('./build/css/concat/bundle.css')
      .pipe(cssmin())
      .pipe(rename('bundle.min.css'))
      .pipe(gulp.dest('./dist/css'))
      .pipe(livereload());
});

gulp.task('htmlmin', () => {
  return gulp.src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true ,//去除空格
      removeComments:true //去除注释
    }))
    .pipe(gulp.dest('dist'))
    .pipe(livereload());
});

gulp.task('default', gulp.series('babel', 'browserify', 'uglify', 'less', 'concat', 'cssmin', 'htmlmin'));

//1. 在所有可能要执行任务后面加上 .pipe(livereload());
gulp.task('watch', async function () {
  //2. 启动热加载服务
  livereload.listen();
  //3. 通过自己服务器打开项目，自动刷新
  connect.server({
      root: 'dist',
      port: 3000,
      livereload: true
  });
  //4. 自动打开浏览器
  opn('http://localhost:3000/index.html');
  //5. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
  gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
  gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
  gulp.watch('./src/index.html', gulp.series('htmlmin'));
});